<template>
  <div class="main">
    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack">
        <van-icon name="arrow-left" size="24"/>
      </div>
      <div slot="center">第三方数据</div>
      <div v-if="!showDelete" class="right" slot="right" @click="showDelete = true">编辑</div>
      <div v-else class="right" slot="right" @click="onSave">保存</div>
    </nav-bar>

    <div class="mainbox">
      <div class="item_outer" v-for="item in lists">
        <div class="item" @click="toDetail(item)">
          <img class="img" :src="item.certificate[0]"/>
          <div class="item_text">
            <h2>{{item.title}}</h2>
            <span>{{item.create_date}}</span>
          </div>
        </div>
        <span v-show="showDelete" class="delete" @click="onDelete(item)"><van-icon name="delete" size="24"
                                                                                   color="#f00"/></span>
      </div>

    </div>
    <div class="add_btn">
      <van-button type="primary" icon="add-o" color="#1692f2" @click="showPopup" block>添加检测数据</van-button>
    </div>

    <van-popup v-model="show" position="bottom" closeable :style="{ height: '75%' }">
      <div class="popup_inner">
        <van-form @submit="onSubmit">
          <van-field
            v-model="title"
            name="title"
            label="标题"
            placeholder="请输入标题"
            :rules="[{ required: true, message: '请填写标题' }]"
          />
          <van-field
            v-model="content"
            rows="1"
            autosize
            label=""
            name="content"
            type="textarea"
            placeholder="请输入内容"
          />

          <div class="up_img">
            <van-uploader v-model="fileList" :after-read="afterRead()" multiple/>
          </div>

          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>

  </div>
</template>

<script>
  import Util from "@/common/util";
  import NavBar from "@/components/common/navbar/NavBar"

  export default {
    name: "thirdParty",
    components: {
      NavBar
    },

    data() {
      return {
        baseURL: '',
        base_id: '',
        pid: '',
        batch_id: '',
        lists: [],
        title: '',
        content: '',
        certificate: [],
        fileList: [],
        show: false,
        showDelete: false,
      }
    },

    created() {
      this.baseURL = Util.baseURL;
      this.base_id = this.$route.query.base_id;
      this.pid = this.$route.query.pid;
      this.batch_id = this.$route.query.bid;
      console.log('批次id', this.batch_id);
      console.log('jidi', this.base_id);
      this.getLists();
    },

    methods: {
      showPopup() {
        this.show = true;
      },

      onSave() {
        this.showDelete = false;
      },

      afterRead(e) {
        let that = this;
        return (e, detail) => {
          console.log('e', e);
          console.log('detail', detail);

          // let certificate = [];
          let fd = new FormData()
          if (e.length == undefined) {//选择了单张图片，file单个对象
            fd.append("file[]", e.file)
            console.log("单张");
            that.$http.post('/api/MobileAadminApi/uploadsFile', fd, r => {
              console.log('上传图片r', r)
              that.certificate = that.certificate.concat(r.data);
              console.log('certificate', that.certificate)
            })
          } else {//选择了多张图片，file为列表
            console.log("多张");
            console.log('上传张数', e.length)
            e.forEach(item => {
              fd.append("file[]", item.file)//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
            })
            that.$http.post('/api/MobileAadminApi/uploadsFile', fd, r => {
              console.log('上传多图片r', r)
              that.certificate = that.certificate.concat(r.data);
              console.log('多certificate', that.certificate)
            })
          }

        }

      },

      onSubmit(values) {
        let that = this;
        console.log('submit', values);
        values['base_id'] = that.base_id;
        values['pid'] = that.pid;
        values['certificate'] = JSON.stringify(that.certificate);

        that.$http.post('/api/MobileAadminApi/addInstitutions', values, r => {
          console.log('添加r', r)
          that.$toast(r.info);
          this.$router.replace({
            path: '/refresh',
            query: {
              pid: that.pid,
              bid: that.id,
              t: Date.now()
            }
          });
          that.show = false;
        })
      },

      getLists() {
        let that = this;
        that.$http.get('/api/UserCheckApi/getInstitutionsList', {batch_id: that.pid}, r => {
          that.lists = r.data;
          console.log('第三方数据r:', r)
        })
      },

      onDelete(e) {
        console.log(e)
        let that = this;
        that.$dialog.confirm({
          title: '删除提示',
          message: '确认删除吗？删除后将无法恢复',
        })
          .then(() => {
            that.$http.get('/api/MobileAadminApi/deleteInstitutions', {id: e.id}, r => {
              console.log('删除成功', r)
              that.$toast('删除成功');
              that.$router.replace({
                path: '/refresh',
                query: {
                  pid: that.pid,
                  bid: that.bid,
                  t: Date.now()
                }
              })
            })
          })
          .catch(() => {
            // on cancel
          });

      },

      toDetail(e) {
        console.log(e)
        this.$router.push({path: '/thirdDetail', query: {id: e.id}})
      },

      goBack() {
        this.$router.go(-1);
      },
    }
  }
</script>

<style scoped>
  .mainbox{
    padding-bottom: 2rem;
  }
  .item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 10px;
    background: #ffffff;
    border-radius: 8px;
  }

  .item img {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 8px;
  }

  .item_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
  }

  .item_text h2 {
    font-size: .3rem;
    font-weight: normal;
    line-height: 1.3;
  }

  .item_text span {
    font-size: .28rem;
    color: #999999;
  }

  .add_btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /*margin: 10px;*/
  }

  .up_img {
    margin: 15px;
  }

  .popup_inner {
    padding-top: .6rem;
  }

  .item_outer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .delete {
    padding: 0 10px 0 5px;
  }
</style>
